import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import {Select, Modal, Button, Tooltip} from 'antd'
const Option = Select.Option

import {WeaInputSearch} from 'ecCom'

import WeaSplitLine from "../../../Component/wea-split-line"

import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('blogMyBlog')
@observer
class TopSearchPanel extends Component {
    constructor(props) {
        super(props)
        this.state = this.initData(props)
    }

    initData = (props) => {
        return {
            groupId: props.defaultGroup.groupId || 'all',
            groupName: props.defaultGroup.groupName || getLabel(384389,"全部关注"),
            content: '',
        }
    }

    get data() {
        return this.state;
    }

    componentWillReceiveProps(props) {
        this.setState({
            groupId: props.defaultGroup.groupId,
            groupName: props.defaultGroup.groupName
        })
    }

    render() {
        let {content, groupId, groupName} = this.state,
            {groupsBefore, groupsAfter} = this.props;
        const {moduleStatus,getBlogGroupAddCondition } = this.props.blogMyBlog;
        return (
            <div className="wea-fans-top-search-panel">
                <div className="wea-ftsp-item wea-ftsp-select">
                    <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@mjxt59`}
                        // style={{minWidth: 120}}
                        dropdownMatchSelectWidth={false}
                        value={groupId + "_" + groupName}
                        onSelect={this.onSelect}
                    >
                        {
                            groupsBefore.map(
                                (item,key) => {
                                    const {groupId, groupName, groupCount} = item
                                    return (
                                        <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@iofko4@${key}`}
                                            className="wea-select-option"
                                            value={groupId + "_" + groupName}
                                        >{`${groupName} ( ${groupCount} )`}</Option>
                                    )
                                }
                            )
                        }
                        <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@2svwto`}
                            value="label"
                            disabled={true}
                            style={{
                                color: "#8a8a8a",
                                padding: 0,
                                minWidth: "200px",
                                cursor: "default"
                            }}
                        ><WeaSplitLine ecId={`${this && this.props && this.props.ecId || ''}_WeaSplitLine@rio0tf`}>{getLabel(384345,"我的分组")}</WeaSplitLine></Option>
                        {
                            groupsAfter.map(
                                (item,key) => {
                                    const {groupId, groupName, groupCount} = item
                                    return (
                                        <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@xhzc2a@${key}`}
                                            className="wea-select-option"
                                            value={groupId + "_" + groupName}
                                        >{`${groupName} ( ${groupCount} )`}
                                        </Option>
                                    )
                                }
                            )
                        }
                        <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@adm7i3`}
                            value="new"
                            style={{
                                background: "#e9e9e9",
                                textAlign: "center",
                                padding: "8px 0",
                                minWidth: "250px"
                            }}
                        ><span className="icon-blog-NewPacket"/>&nbsp;&nbsp;&nbsp;{getLabel(30131,"新建分组")}</Option>
                    </Select>
                    {
                        groupId != "all" && groupId != "nogroup" ? (
                            <span>
                                <span
                                    onClick={() => {
                                        getBlogGroupAddCondition({id: groupId});
                                        moduleStatus.editKey = groupId;
                                        moduleStatus.createOrEdit = 'edit';
                                        moduleStatus.showGroupCreate = true;
                                    }}
                                    className="wea-ftsps-icon icon-blog-Pay"
                                    title={getLabel(26473,"编辑")}
                                />
                                <span onClick={this.deleteGroup} className="wea-ftsps-icon icon-blog-delete" title={getLabel(91,"删除")}/>
                            </span>
                        ) : ""
                    }
                </div>
                <div className="wea-ftsp-item wea-ftsp-search">
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@vn5x1y`}
                        placeholder=""
                        value={content}
                        onSearchChange={this.onSearchChange}
                        onSearch={this.onSearch}
                        style={{width: '125px'}}
                    />
                </div>
            </div>
        )
    }


    deleteGroup = () => {
        const {deleteGroup, getAttentionList } = this.props.blogMyBlog
        
        let {groupId, groupName} = this.state
        const modal = Modal.confirm({
            title: getLabel(131329,'信息确认'),
            content: (<div><p>{getLabel(384343,"确定要删除分组吗？")}</p><p>{getLabel(384458,"删除后，此分组下的人员将移至'未分组'列表。")}</p></div>),
            okText: `${getLabel(382958,'确定')}`,
            cancelText:`${getLabel(31129,'取消')}`,
            onOk: () => {
                deleteGroup(
                    {groupId: groupId, groupName: groupName},
                    result => {
                        if (result.status == "1") {
                            getAttentionList(
                                {groupId: "nogroup"},
                                this.setState({groupId: "nogroup", groupName: getLabel(81307,"未分组")})
                            )
                            this.props.changeGroup({groupId: "nogroup", groupName: getLabel(81307,"未分组")})
                        }
                    }
                )
                modal.destroy()
            },
            onCancel: () => {
            }
        })
    }

    onSelect = (value) => {
        const {getAttentionList,moduleStatus,getBlogGroupAddCondition } = this.props.blogMyBlog
        if (value == "new") {
            getBlogGroupAddCondition();
            moduleStatus.createOrEdit='create';
            moduleStatus.showGroupCreate=true;
        } else {
            const values = value.split("_")
            this.setState({groupId: values[0], groupName: values[1], content: ""})
            getAttentionList({groupId: values[0]})
            this.props.changeGroup({groupId: values[0], groupName: values[1]})
        }
    }

    onSearchChange = (value) => {
        this.setState({content: value})
    }
    onSearch = () => {
        const {getAttentionList } = this.props.blogMyBlog
        
        this.setState({groupId: "all", groupName: getLabel(384389,"全部关注")})
        getAttentionList({searchKey: this.state.content})
        this.props.changeGroup({groupId: "all", groupName: getLabel(384389,"全部关注")})
    }
}

export default TopSearchPanel